<template>
  <div>
    <van-nav-bar title="停车记录" left-text="返回"  left-arrow @click-left="back"/>

    <van-form @submit="onSubmit">
      <van-field v-model="entryTime" name="entryTime" label="入场时间" placeholder="请输入入场时间"
        :rules="[{ required: false, message: '请输入入场时间' }]" />
      <van-field v-model="outTime" name="outTime" label="出场时间" placeholder="请输入出场时间"
        :rules="[{ required: false, message: '请输入出场时间' }]" />
        <van-field v-model="parkName" name="parkName" label="停车场名称" placeholder="请输入停车场名称"
        :rules="[{ required: false, message: '请输入停车场名称' }]" />
        <van-field v-model="plateNumber" name="plateNumber" label="车牌号" placeholder="请输入车牌号"
        :rules="[{ required: false, message: '请输入车牌号' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">查询</van-button>
      </div>
    </van-form>

    <div class="parklist" v-for="item in list" :key=item.id>
      <p>{{item.address}}</p>
      <div>车牌号：{{item.plateNumber}}</div>
      <div>收费金额：{{item.monetary}}元</div>
      <div>入场时间：{{item.entryTime}}</div>
      <div>出场时间：{{item.outTime}}</div>
    </div>
  </div>
</template>

<script>
import mixin from  "@/mixin/flag";
import{parksearch} from "./Service"
export default{

  mixins:[mixin],
  data(){
    return{
      entryTime:'',
      outTime:'',
      parkName:'',
      plateNumber:'',
      list:[],
    }
  },
  methods:{
    back(){
      this.$router.go(-1);
    },
    mine(){
      this.$router.push('/park/mine');
    },
     async onSubmit(){
      let res =await parksearch({
        entryTime:this.entryTime,
      outTime:this.outTime,
      parkName:this.parkName,
      plateNumber:this.plateNumber,
      });
      this.list=res.data.rows
      // console.log(res);
    }
    // 2020-10-26 16:35:57
  },
  
 
}

</script>

<style lang="scss" scoped>
.parklist{
  padding-left: 25px;
  font-size: 14px;
  height: 130px;
  line-height: 24px;
  border-bottom: solid 1px #555;
  p{
    font-size: 16px;
    font-weight: bold;
  }
}

</style>